<style>
    .el-row {
        background-color: #1844a8!important;
    }
    .cdcss {
        background-color: #1844a8!important;
    }
</style>
<div id="cjwt" class="prt_cont1_box" style="margin-top: 5%;">
    <div class="prt_cont1">
        <div style="display: flex;justify-content: center;width: 100%;">
            <div style="margin-top: 10px;margin-right: 100px;"><img src="./img/z.png"></div>
            <div style="font-size: 27px;">常见问题</div>
            <div style="margin-top: 10px;margin-left: 100px;"><img src="./img/y.png"></div>
        </div>
        <div style="height:50px;width: 100%;"></div>
        <div id="container" class="w990 mlrauto clearfix"
             style="margin-bottom: 15px;display: grid; justify-content: center;align-items: center; ">
            <div>
                <input type="text" id="question" class="feedbackInputText" placeholder="请输入问题名称" value=""
                       style="width: 300px;height: 30px;">
                <el-button @click="searchAnswer">搜索</el-button>
                <div style="display: flex;width: 100%;">
                    <el-collapse v-model="activeNames">
                        <el-collapse-item v-for="(item, index) in list" :key="index" :title="item.question"
                                          :name="index" :collapse-transition="false">
                            <div>{{item.answer}}</div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div class="cb"></div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>
<script>

    new Vue({
        // 控制的标签容器
        el: '#cjwt',
        // 交互的数据
        data() {
            return {
                count: 0,
                getproblemlist: "/home/getproblemlist",
                activeNames: ['1'],
                list:[]
            };
        },
        mounted() {
            //加载
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
            });
            this.footer();
            this.searchAnswer();
            loading.close();
        },
        methods: {
            searchAnswer(){
                var that_ = this;
                $.ajax({
                    url: this.getproblemlist,
                    type: 'post',
                    data:{answer:$("#question").val()},
                    success: function (res) {
                       // console.log(res)
                        that_.list = res.data;
                    }
                })
            },
            /**
             * 渲染底部
             */
            footer() {
                $('#footer').load("/home/footer");
            },
        }
    })
</script>
<style>
    .el-collapse {
        width: 100% !important;
        margin-top: 100px!important;
    }
    #container{
        margin-bottom: 100px!important;
    }
</style>